<template>
            <!--default-active="defaultActive"-->
    <el-menu
            @select="select"
            background-color="#4c92b8"
            text-color="#fff"
            router
            unique-opened
            :default-active="defaultActive"
            :default-openeds="defaultOpeneds"
            active-text-color="#ffd04b">
        <template v-for="(item, idx) in items">
            <template v-if="item.subs && item.subs.length>0">
                <xx-submenu :menu="item" :key="idx"></xx-submenu>
            </template>
            <template v-else>
                <el-menu-item :index="item.index" :key="idx">
                    <i v-if="item.icon" :class="item.icon"></i>
                    <span slot="title">{{item.name}}</span>
                </el-menu-item>
            </template>
        </template>
    </el-menu>
</template>

<script>
import submenu from '@/components/xx-submenu.vue'
    export default {
        name: "xx-menu",
        components: {
            "xx-submenu": submenu
        },
        props:{
            menus: Array,
            select: Function,
            struct:{
                index: String,
                icon: String,
                name: String,
                subs: String,
            },
            defaultActive: String,
            defaultOpeneds: Array
        },
        data(){
            return {}
        },
        computed:{
            items:{
                get() {
                    if(this.struct) {
                        return this.initMenus(this.menus, this.struct)
                    } else {
                        return this.menus
                    }
                },
            },
        },
        created() {
        },
        methods:{
            initMenus(menus, p) {
                p.index = p.index?p.index:"index";
                p.name = p.name?p.name:"name";
                p.icon = p.icon?p.icon:"icon";
                p.subs = p.subs?p.subs:"subs";
                let items = [];
                for(let i=0,ln=menus.length; i<ln; i++) {
                    let tag = menus[i];
                    let menu = {
                        index: tag[p.index]?tag[p.index]:"others",
                        name: tag[p.name]?tag[p.name]:"未设置菜单名",
                        icon: tag[p.icon]?tag[p.icon]:null,
                        subs: null,
                    };
                    if(tag[p.subs] && tag[p.subs].length>0) {
                        menu.subs = this.initMenus(tag[p.subs], p)
                    }
                    items[i] = menu
                }
                return items
            }
        }
    }
</script>

<style scoped>
.el-menu{
    border-right: none;
}
.el-menu.el-menu--horizontal {
    border-bottom: none;
}
</style>